<script lang="ts">
import {defineComponent, onMounted, reactive, toRefs} from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

export default defineComponent({
  name: 'icon-change',
  props: {
    modelValue: {
      type: String,
      default: 'HomeFilled',
      meta: "icon图标字符串,用于展示"//仅用于说明
    },
    //展示列表宽度
    width: {
      type: String,
      default: "600",
      meta: "图标展示列宽"
    },
    maxHeight: {
      type: String,
      default: '300px',
      meta: "图标展示最高高度"
    },
    placement: {
      type: String,
      default: "right-start",
      meta: "图标展示列位置 参考el-popover"
    },
    trigger: {
      type: String,
      default: "hover",
      meta: "图标展示触发方式 参考el-popover"
    },
    changeColor: {
      type: String,
      default: '#1677FF',
      meta: "选中图标颜色"
    },
    unChangeColor: {
      type: String,
      default: "#363639",
      meta: "未选中图标颜色"
    },
    autoCopy: {
      type: Boolean,
      default: false
    }
  },
  emits: ['change'],
  setup(props, {emit}) {
    const data = reactive({
      iconList: [] as string[],
      currentIcon: ""
    })
    onMounted(() => {
      data.iconList = Object.entries(ElementPlusIconsVue).map(([name]) => (
          name
      ))
      data.currentIcon = props.modelValue
    })


    const methods = {
      async changeIcon(iconName: string) {
        data.currentIcon = iconName
        //复制
        if (props.autoCopy) {
          try {
            await navigator.clipboard.writeText(iconName);
            console.log("复制成功")
          } catch (err) {
            console.error('❌ 复制失败：', err);
          }
        }

        emit("change", data.currentIcon)
      },
    }

    const validators = {}
    const rules = reactive({})
    const refs = {}

    return {
      ...toRefs(data),
      ...methods,
      validators,
      rules,
      ...refs,
    }
  }
})
</script>

<template>
  <div
      style="border-radius:5px;padding:0 10px ; width: fit-content;display: flex ;gap: 25px;justify-content: center;align-items: center;  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);border:1px solid #dac5c5">
    <!-- 显示当前选中的图标 -->
    <el-icon size="25" :color="changeColor">
      <component :is="currentIcon"/>
    </el-icon>
    <el-popover
        :placement=placement
        :title="'请选择图标'+(autoCopy?'(选中后自动复制)':'')"
        :width=width
        :trigger=trigger

    >
      <template #reference>
        <div style="display: flex;flex-direction: column;gap: 0;align-items: center">
          <el-icon size="10">
            <component is="More"></component>
          </el-icon>
          <div style="font-size: 10px">更多</div>
        </div>
      </template>
      <template #default>
        <div
            v-if="iconList&&iconList.length>0"
            :style="{
              maxHeight:maxHeight,
            }"
            style=" overflow-y: auto;width: 100%;display: flex;flex-wrap: wrap;flex:1;align-items: center;justify-content: flex-start;gap: 5px 5px">
          <el-icon
              :size="25"
              :color="currentIcon==item?changeColor:unChangeColor"
              v-for="(item,index) in iconList"
              @click="changeIcon(item)"
              :key="index"
              style="cursor: pointer"
          >
            <component :is="item"></component>
          </el-icon>
        </div>
      </template>
    </el-popover>


  </div>
</template>

<style scoped>

</style>